<template>
  <div>
    <h1 style="font-size: 28px">修改用户</h1>
    <div>
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="账号名称" required>
          <a-input v-model:value="user_name" disabled/>
        </a-form-item>
        <a-form-item label="用户昵称" required>
          <a-input v-model:value="nick_name"/>
        </a-form-item>
        <a-form-item label="性别" required>
          <a-select name="gender" v-model:value="gender" :options="options1"></a-select>
        </a-form-item>
        <a-form-item label="状态" required>
          <a-select name="status" v-model:value="status" :options="options2"></a-select>
        </a-form-item>
        <a-form-item label="地址">
          <a-input v-model:value="address"/>
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea v-model:value="intro"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" style="width: 140px;" @click="onConfirm">确定</a-button>
          <a-button style="width: 140px;margin-left: 20px;" @click="onBack">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
  import {createVNode, defineComponent, ref, reactive, toRefs} from 'vue';
  import {message, Modal} from 'ant-design-vue';
  import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
  import {modifyUser} from "/@/api/core/user";
  import {HttpResult} from "/@/api/core/model/coreModel";
  import {SelectTypes} from 'ant-design-vue/es/select';

  export default defineComponent({
    name: 'UserEdit',
    props: {
      item: {
        type: Object,
        default: null,
      },
      viewType: {
        type: String,
        default: null,
      }
    },
    setup(props, {emit}) {

      const options1 = ref<SelectTypes['options']>([
        {
          value: '0',
          label: '男',
        },
        {
          value: '1',
          label: '女',
        },
      ]);

      const options2 = ref<SelectTypes['options']>([
        {
          value: '0',
          label: '正常',
        },
        {
          value: '1',
          label: '停用',
        },
      ]);

      const data = reactive({
        id: props.item.id,
        user_name: props.item.user_name,
        nick_name: props.item.nick_name,
        gender: props.item.gender + '',
        status: props.item.status + '',
        address: props.item.address,
        identity_number: props.item.identity_number,
        intro: props.item.intro,
      });

      const onConfirm = () => {
        Modal.confirm({
          title: '确定要修改用户？',
          icon: createVNode(ExclamationCircleOutlined),
          content: '',
          onOk() {
            modifyUser({
              id: data.id,
              nick_name: data.nick_name,
              gender: data.gender,
              status: data.status,
              identity_number: data.identity_number,
              address: data.address,
              intro: data.intro,
            }).then((result: HttpResult) => {
              if (result.code == 0) {
                message.success("修改成功");
                emit("my-emit", 'Confirm');
              } else {
                message.error(result.message);
              }
            });
          },
          onCancel() {
          },
        });
      }

      const onBack = () => {
        emit("my-emit", 'Cancel');
      }

      return {
        ...toRefs(data),
        options1,
        options2,
        onConfirm,
        onBack,
      };
    }
  });

</script>

<style scoped>

</style>
